<template>
  <div class="main-container">
    <search></search>
    <van-swipe :autoplay="3000" class="main-banner">
      <van-swipe-item v-for="(image, index) in banner" :key="index">
        <img v-lazy="`https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg`" class="img" />
      </van-swipe-item>
    </van-swipe>
    <div class="main-news">
      <div class="box">
        <div class="list">
          <p class="name ">———&nbsp;精&nbsp;选&nbsp;单&nbsp;品&nbsp;———</p>
          <van-swipe :autoplay="3000" class="danpin-banner">
            <van-swipe-item v-for="(image, index) in banner" :key="index">
              <img v-lazy="`https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg`" class="img" />
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
    </div>

    <div class="product_list">
      <div class="box">
        <div class="list">
          <p class="name ">———&nbsp;产&nbsp;品&nbsp;分&nbsp;类&nbsp;———</p>
          <productsSingle :products="products"></productsSingle>
        </div>
      </div>
    </div>
    <div class="product_list">
      <div class="box">
        <div class="list">
          <p class="name ">———&nbsp;商&nbsp;品&nbsp;推&nbsp;荐&nbsp;———</p>
          <products :products="products"></products>
        </div>
      </div>
    </div>
    <div class="see_more">
      <h3>SEE MORE</h3>
      <div class="more_title">
        <a href=''>查看更多</a>
      </div>
    </div>
  </div>
</template>

<script>
import { getNews, getBanner, getCommunityById } from "@/api/common";
import { mapState, mapGetters } from "vuex";
import commonFun from "@/mixins/common";
import products from "../components/grid_product/grid";
import productsSingle from "../components/grid_product/grid_single";
import search from "../components/Search/Search";
export default {
  name: "index",
  mixins: [commonFun],
  data() {
    return {
      showBase: true,
      newsActive: 0,
      active: 0,
      isLoading: false,
      news: [],
      products: [{
        desc: "单西",
        english: "MENS SUITS",
        imagePath: "http://img.hlamall.cn/hnzad1r015a/1547457027085.jpg",
        title: "HLA海澜之家简约时尚卫衣2019",
        price: "318"
      }, {
        desc: "夹克",
        english: "JACKETS",
        imagePath: "http://img.hlamall.cn/sources/goods/HNTJD4E116A/HNTJD4E116A_21625_1.jpg",
        title: "HLA海澜之家净色圆领卫衣2018秋季新品针织套头卫衣男",
        price: "198"
      }, {
        desc: "卫衣",
        english: "SWEATERS",
        imagePath: "https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg",
        title: "HLA/海澜之家白色衬衫男斜纹提花长袖衬衫2019春季新品服帖正装HNCAD1R002T",
        price: "188"
      }, {
        desc: "长袖衬衫",
        english: "SHIRTS",
        imagePath: "http://img.hlamall.cn/hncad1r001t/1550727449233.jpg",
        title: "MEN'S SUITS",
        price: "258"
      }, {
        desc: "单西",
        english: "MENS SUITS",
        imagePath: "https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg",
        title: "MEN'S SUITS",
        price: "256"
      }, {
        desc: "单西",
        english: "MENS SUITS",
        imagePath: "https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg",
        title: "MEN'S SUITS",
        price: "218"
      }],
      vxCommunityId: "",
      banner: ["logo.jpg", "logo.jpg"]
    };
  },
  watch: {
    // $route() {
    //   this.vxCommunityId = this.$route.query.communityId;
    // },
    // vxCommunityId() {
    //   this.onRefresh();
    //   this.scrollNews();
    // }
  },
  created() {
    // this.onRefresh();
    // this.scrollNews();
  },
  mounted() {
    if (this.roles === this.rolesList.WXG) {
      this.menu[2].path = "/admin/guarantee";
      this.menu[2].title = "维修管理";
    } else if (this.roles === this.rolesList.JL) {
      this.menu[2].path = "/admin/complaint";
      this.menu[2].title = "投诉管理";
    }
  },
  computed: {
    newsFlag() {
      return this.news.length !== 0;
    },
    newsTop() {
      return `${-this.newsActive * 70}px`;
    },
    ...mapGetters(["roles"]),
    ...mapState(["user", "community", "rolesList"])
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        this.newsActive = 0;
        this.isLoading = false;
      }, 500);
      // 获取咨询
      getNews({
        communityId: "68e04e6517d84746ac9e70a6be4bc478",
        page: 1,
        limit: 5,
        type: 0
      }).then(res => {
        const data = res.data;
        this.news = data.records;
      });
      // 获取滚动图
      getBanner("68e04e6517d84746ac9e70a6be4bc478").then(res => {
        const data = res.data;
        const obj = data.obj;
        this.banner = obj || new Array(3);
      });
    },
    scrollNews() {
      setInterval(() => {
        if (this.newsActive < this.news.length - 1) {
          this.newsActive += 1;
        } else {
          this.newsActive = 0;
        }
      }, 3000);
    }
  },
  components: {
    products,
    productsSingle,
    search
  }
};
</script>

<style lang="scss" scoped>

/* //头部 */

.main-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  color: #fff;
  background-color: rgba($color: #fff, $alpha: 0);
  &::after {
    border: none !important;
  }
  .van-nav-bar__title {
    font-size: 14px !important;
  }
  i {
    color: #fff;
    font-size: 22px;
  }
  .van-nav-bar__right {
    i {
      margin-top: -5px;
    }
  }
}
/* //banner */

.main-banner {
  padding: 0;
  height: 400px;
  .img {
    width: 100%;
    height: 100%;
  }
}

.danpin-banner {
  padding: 0;
  height: 300px;
  .img {
    width: 100%;
    height: 100%;
  }
}

.main-menu {
  padding: 3px 1.5px;
  a {
    text-decoration: none;
  }
  /* //菜单 */
  .menu-item {
    margin: 2.5px;
    padding: 28px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background-color: #fff;
    i {
      margin-right: 12px;
      font-size: 42px;
    }
    .item-title {
      margin-bottom: 15px;
      color: #333;
      font-size: 16px;
    }
    .item-subtitle {
      margin-bottom: 15px;
      font-size: 12px;
      color: #b3b8bc;
    }
  }
}
/* //新闻 */

.main-news {
  $color: #ef5b26;
  padding: 15px 10px 8px 10px;
  background-color: #fff;
  .box {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    border-bottom: 1px solid #e6e6e6;
  }
  .list {
    width: 100%;
  }
  .menu {
    padding-left: 20px;
    box-sizing: border-box;
    height: 70px;
    overflow: hidden;
  }
  i {
    margin-top: -6px;
    margin-right: 12px;
    color: $color;
    font-size: 36px;
  }
  .name {
    margin-bottom: 14px;
    color: $color;
    text-align: center;
    font-size: 16px;
  }
  .item {
    margin-bottom: 25px;
    position: relative;
    color: #333;
    text-decoration: none;
    transition: top 0.5s;
    display: block;
    a {
      color: #333;
      text-decoration: none;
    }
    .title {
      width: 70%;
      margin-bottom: 10px;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      height: 20px;
    }
    .datetime {
      color: #ccc;
      font-size: 12px;
    }
  }
  .more {
    margin-bottom: 10px;
    color: #b3b8bc;
    font-size: 14px;
    text-align: right;
    a {
      color: #b3b8bc;
    }
  }
}
/* //产品分类 */

.product_list {
  $color: #ef5b26;
  padding: 15px 10px 8px 10px;
  background-color: #fff;
  .box {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    border-bottom: 1px solid #e6e6e6;
  }
  .list {
    width: 100%;
  }
  .name {
    margin-bottom: 14px;
    color: $color;
    text-align: center;
    font-size: 16px;
  }
}
//查看更多
.see_more {
  margin: 20px 0px;
  height: 180px;
  width: 100%;
  background: url("../assets/images/seemore1.jpg") no-repeat center;
  background-size: 100% 100%;
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  h3 {
    font-size: 28px;
    color: #fff;
    text-align: center;
    padding-top: 50px;
  }
  .more_title {
    width: 120px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    margin: 0px auto;
    color: #fff;
    font-size: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    border: 2px solid #fff;
    a {
      color: #fff;
    }
  }
}
.bootom_div {
  position: fixed;
  bottom: 0px;
  width: 100%;
}
</style>